<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <form class="form-horizontal m" id="form-record-view" th:object="${indexView}">
            <div class="row">
                <div class="col-sm-3">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h4>现有余额</h4>
                            <h3 class="no-margins" th:text="${indexView.money}"></h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h4>活动次数</h4>
                            <h3 class="no-margins" th:text="${indexView.activeCount}"></h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h4>会员人均费用</h4>
                            <h3 class="no-margins" th:text="${indexView.avgMoney}"></h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="ibox">
                        <div class="ibox-content">
                            <h4>群基金</h4>
                            <h3 class="no-margins" th:text="${indexView.clubMoney}"></h3>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="row">
                <div id="main" class="echarts" style="height: 480px;width: 1500px"></div>
        </div>

    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/report/echarts/echarts-all.min.js}"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
            var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "/biz/index/show",    //请求发送到dataActiont处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].memberName);
                            values.push(result[i].totalNum);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({
                            //加载数据图表
                            title:{
                                text: '打球次数TOP-15'
                            },

                            legend: {
                                data:['打球次数']
                            },
                            xAxis: {
                                  show: true,
                                data: names,
                                axisLabel:{
                                    interval: 0
                                }

                            },
                            yAxis: {
                                show: true,
                                type: 'value',
                                axisLabel : {
                                    formatter: '{value}'
                                }
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '打球次数',
                                type: 'bar',
                                data: values,
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true, //开启显示数值
                                            position: 'top', //数值在上方显示
                                            textStyle: {  //数值样式
                                                color: '#00008B',   //字体颜色
                                                fontSize: 14  //字体大小
                                            }
                                        }
                                    }
                                }
                            }]
                        });
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });//end ajax
        });

	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });
    </script>
</body>
</html>
